<template>
  <div class="top">
    <div class="top-l">
      <img
        class="img"
        :src="user.avatar"
        alt=""
        v-if="!user.avatar"
      >
      <img
        class="img"
        src="@/assets/images/user.png"
        alt=""
        v-else
      >
    </div>
    <div class="top-r">
      <div class="top-r-1">
        <label for="">名称:</label>
        <span>{{user.name}}</span>
      </div>
      <div class="top-r-1">
        <label for="">登录名:</label>
        <span>{{user.email}}</span>
      </div>
      <div class="top-r-1">
        <label for="">电话:</label>
        <span v-if="user.phone">{{user.phone}}</span>
        <span v-else>暂无</span>
      </div>
      <div class="top-r-1">
        <label for="">创建时间:</label>
        <span v-if="user.created_at">{{user.created_at}}</span>
        <span v-else>暂无</span>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  /* props接收 */
  props: ['user'],
  data: () => ({})
}
</script>
<style lang="less" scoped>
.top {
  background: #74c8bb;
  margin: 10px 10px;
  margin-bottom: 0;
  border-radius: 10px 10px 0 0;
  height: 100px;
  display: flex;
  // justify-content: center;
  align-items: center;
  .top-l {
    // background: red;
    flex: 1;
    .img {
      width: 50px;
      height: 50px;
    }
  }
  .top-r {
    flex: 2;
    text-align: left;
  }
}
</style>